import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { colors } from 'react-native-tailwindcss';

import IconFont from '../assets/iconfont';
import HomeScreen from '../pages/HomeScreen';
import QueryContainer from '../containers/QueryContainer';
import SignInContainer from '../containers/SignInContainer';

const Tab = createBottomTabNavigator();

function HomeTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      activeColor="#fff"
      tabBarOptions={{
        activeTintColor: colors.themeBlue,
        labelStyle: {
          marginBottom: 5,
        },
      }}>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          //   tabBarBadge: 3,
          tabBarLabel: '首页',
          tabBarColor: '#009387',
          tabBarIcon: ({ color, size }) => (
            <IconFont name="icon-home-h" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Query"
        component={QueryContainer}
        options={{
          tabBarLabel: '查询',
          //   tabBarColor: '#009387',
          tabBarIcon: ({ color, size }) => (
            <IconFont
              name="icon-zhuangtailan-chaxuntianchong"
              color={color}
              size={size}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Settings"
        component={SignInContainer}
        options={{
          tabBarLabel: '我的',
          //   tabBarColor: '#1f65ff',
          tabBarIcon: ({ color, size }) => (
            <IconFont name="icon-user02" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

export default HomeTabs;
